<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地引入 -->
    <script src="../js/vue.js"></script>

    <!-- 在线引入 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
</head>
<body>
    <!-- vue中的模板语法  => 如果没有Vue,就是一个简单html结构 -->
    <div id="app">
        <!-- {{xxx}} 文本插值 => 将表达式的结果渲染到标签内  -->
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <p>{{ bool }}</p>
    </div>

</body>
<script>
    // AjaxPromise({type,url,data})

</script>
<script>
    // Vue
    // Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。


    // vue的特征:
    // 1. 声明式渲染
    //    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    // 2. 响应式 => 当挂载的数据数据发生改变,视图也会同步更新

    // 注意:
    // 1. Vue实例中挂载的数据,只能在挂载的元素中使用


    // console.log(Vue);  // 构造函数 => 创建实例化对象

    // app (Vue实例  应用)
    // new Vue(options) => new Vue()中接收一个options对象(配置对象),Vue中的绝大部分功能都和options对象有关
    // options  配置对象
    //    el  挂载的元素=>传入一个css选择器(字符串),根据选择器获取元素,该元素就是Vue实例/应用 挂载的元素

    var vm = new Vue({
        el: '#app', // 挂载的元素
        data:{   // 挂载的数据 -> 数据只有在data中绑定,才能在对应的元素中渲染 (对应data中的键名渲染)
            message:"Hello Vue",
            count:100,
            bool:true,
        }
    })


    // 2. 响应式 => 当挂载的数据数据发生改变,视图也会同步更新
    // 如何改变数据 => 依赖于Vue实例/应用
    // a. vm.$data
    // b. Vue实例也绑定了同名属性 -> 操作该属性等价于操作vm.$data上的对应属性
    console.log(vm);
    // console.log(vm.$el);  // 挂载的元素
    // console.log(vm.$data);  // 挂载的数据

    // console.log(vm.message);
    // console.log(vm.count);
    // console.log(vm.bool);

    // setTimeout(()=>{
    //     // 通过vm.$data 操作数据较为麻烦
    //     vm.$data.message = "hello world";
    //     vm.$data.count = 200;
    //     vm.$data.bool = false;
    // },2000)
    

    document.ondblclick = function(){
        // Vue实例也绑定了同名属性 -> 操作该属性等价于操作vm.$data上的对应属性
        vm.message = "hello world";
        vm.count = 200;
        vm.bool = false;
    }

</script>
</html>